<!--广告回传配置-->

<template>
        <el-row :gutter="20" class="filter-row">
            <el-col :span="5">
                <el-input v-model="filters.name" placeholder="请输入名称" clearable></el-input>
            </el-col>
            <el-col :span="5">
                <el-select v-model="filters.advertiser" placeholder="请选择广告商" clearable>
                    <el-option
                            v-for="item in advertisers"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-col>
            <el-col :span="5">
                <el-select v-model="filters.returnMethod" placeholder="请选择回传方式" clearable>
                    <el-option
                            v-for="item in returnMethods"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-col>
            <el-col :span="5">
                <el-select v-model="filters.orderType" placeholder="请选择订单类型" clearable>
                    <el-option
                            v-for="item in orderTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="resetFilters">重置</el-button>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-bottom: 20px;margin-left: 20px">
            <el-button type="warning" @click="exportTemplates">导出</el-button>
        </el-row>

        <el-table :data="paginatedData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="配置ID" width="150" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="advertiser" label="广告商" />
            <el-table-column prop="uploadType" label="上报类型" />
            <el-table-column prop="returnMethod" label="回传方式" />
            <el-table-column prop="returnCount" label="回传笔数" />
            <el-table-column prop="leakCount" label="漏传笔数" />
            <el-table-column prop="orderType" label="订单类型" />
            <el-table-column prop="chargePeriod" label="充值时段区间" />
            <el-table-column prop="minReturnAmount" label="回传最小金额" />
            <el-table-column prop="maxReturnAmount" label="回传最大金额" />
            <el-table-column prop="note" label="备注" />
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-link type="primary" @click="handleEdit(scope.row)">修改</el-link>
                    <el-link style="margin-left: 10px" type="primary" @click="handleDisable(scope.row)">禁用</el-link>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 30]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog title="修改广告回传配置" v-model="dialogVisible" width="500px">
            <el-form :model="currentRow">
                <el-form-item label="名称" :required="true">
                    <el-input v-model="currentRow.name" />
                </el-form-item>
                <el-form-item label="广告商" :required="true">
                    <el-select v-model="currentRow.advertiser">
                        <el-option v-for="item in advertisers" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="上报类型" :required="true">
                    <el-select v-model="currentRow.uploadType">
                        <el-option v-for="item in uploadTypes" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="回传方式" :required="true">
                    <el-select v-model="currentRow.returnMethod">
                        <el-option v-for="item in returnMethods" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="回传笔数">
                    <el-input v-model="currentRow.returnCount" />
                </el-form-item>
                <el-form-item label="漏传笔数">
                    <el-input v-model="currentRow.leakCount" />
                </el-form-item>
                <el-form-item label="回传订单类型" :required="true">
                    <el-select v-model="currentRow.orderType">
                        <el-option v-for="item in orderTypes" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="充值时段区间">
                    <el-input v-model="currentRow.chargePeriod" />
                </el-form-item>
                <el-form-item label="回传最小金额">
                    <el-input v-model="currentRow.minReturnAmount" />
                </el-form-item>
                <el-form-item label="回传最大金额">
                    <el-input v-model="currentRow.maxReturnAmount" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="currentRow.note" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button style="margin-left: 300px" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
        </el-dialog>
</template>

<script setup>
    import { reactive, ref, computed } from 'vue'
    import {ElMessage, ElMessageBox} from 'element-plus'

    const filters = reactive({
        name: '',
        advertiser: '',
        returnMethod: '',
        orderType: '',
    })

    const advertisers = ref([
        { value: '1', label: '广告商1' },
        { value: '2', label: '广告商2' },
    ])

    const returnMethods = ref([
        { value: 'all', label: '全量' },
        { value: 'paid', label: '付费' },
    ])

    const orderTypes = ref([
        { value: 'all', label: '全量订单' },
        { value: 'first', label: '首充订单' },
    ])

    const uploadTypes = ref([
        { value: 'type1', label: '类型1' },
        { value: 'type2', label: '类型2' },
    ])

    const tableData = ref([
        {
            id: '3545',
            name: 'tgadmin-051',
            advertiser: '头条',
            uploadType: '全量',
            returnMethod: '全量',
            returnCount: 0,
            leakCount: 0,
            orderType: '全量订单',
            chargePeriod: 0,
            minReturnAmount: 0,
            maxReturnAmount: '',
            note: '',
        },
        {
            id: '3546',
            name: '62230-111回传配置',
            advertiser: '头条',
            uploadType: '付费回传',
            returnMethod: '全量',
            returnCount: 1,
            leakCount: 0,
            orderType: '首充订单',
            chargePeriod: 1,
            minReturnAmount: 0,
            maxReturnAmount: '',
            note: '',
        },
        {
            id: '3548',
            name: '测试',
            advertiser: '头条',
            uploadType: '付费回传',
            returnMethod: '全量',
            returnCount: 0,
            leakCount: 0,
            orderType: '全量订单',
            chargePeriod: 0,
            minReturnAmount: 0,
            maxReturnAmount: '',
            note: '',
        },
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(tableData.value.length)

    const paginatedData = computed(() => {
        const start = (currentPage.value - 1) * pageSize.value
        const end = start + pageSize.value
        return tableData.value.slice(start, end)
    })

    const handleCurrentChange = (page) => {
        currentPage.value = page
    }

    const handleSizeChange = (size) => {
        pageSize.value = size
    }

    const search = () => {
        ElMessage.success('搜索功能待实现')
    }

    const resetFilters = () => {
        filters.name = ''
        filters.advertiser = ''
        filters.returnMethod = ''
        filters.orderType = ''
    }

    const dialogVisible = ref(false)
    const currentRow = ref({})

    const handleEdit = (row) => {
        currentRow.value = { ...row }
        dialogVisible.value = true
    }

    const handleDisable = (row) => {
        ElMessageBox.confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            // Implement delete logic here
        }).catch(() => {
            // Handle cancel action
        })
    }

    const save = () => {
        ElMessage.success('保存功能待实现')
        dialogVisible.value = false
    }
</script>

<style scoped>
    .filter-row {
        margin-bottom: 20px;
    }
    .dialog-footer {
        text-align: right;
    }
</style>
